<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<view class="search-icon">
					<img class="search-icon" src="../../static/action/search.png" alt="" />
				</view>
				<input style="margin-left: 18rpx;" type="text" placeholder="搜索动作名称或部位" />
			</view>
			<view class="add">
				<img class="add" src="../../static/action/add.png" alt="" />
			</view>
		</view>
		<view class="mid">
			<view class="mid-left">
				<view class="choose_location_list">
					<view class="choose_location_module" v-for="(item,index) in location_list" :key="index"
						:class="{ 'active-location': selectedLocationIndex === index }"
						@click="selectLocation(item.name, index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="mid-right">
				<scroll-view class="right-header" scroll-x="true" style="width: 100%;">
					<view class="right-header-inner" style="white-space: nowrap; display: flex;">
						<view class="right-header-module" v-for="(item,index) in machine_list" :key="index"
							:class="{ active: selectedMachineIndex === index }" @click="selectMachine(item.name, index)"
							style="flex-shrink: 0;">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="right-content">
					<scroll-view ref="mainScroll" class="right-center" style="max-height: 80vh;" scroll-y="true"
						@scroll="handleScroll" :scroll-into-view="scrollTarget" :scroll-with-animation="true">
						<view class="right-content">
							<view v-for="(machine, index) in machine_list" :key="index" :id="'machine-' + index"
								v-if="getActionsByLocationAndMachine(selected_loaction, machine.name).length > 0">
								<view class="machine-title">{{machine.name}}</view>
								<view class="right-content-module" @click="handleAction(item)"
									v-for="item in getActionsByLocationAndMachine(selected_loaction, machine.name)"
									:key="item.id">
									<view class="right-text">
										<view class="title">
											{{item.action_name}}
										</view>
										<view class="content">
											{{item.train_muscles}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VueEvent from '../../VueEvent.js';
	import {
		excelData
	} from './action.js';
	import request_new from '../../apis/action.js';
	export default {
		data() {
			return {
				location_list: [{
						id: 1,
						name: '胸'
					},
					{
						id: 2,
						name: '肩'
					},
					{
						id: 3,
						name: '背'
					},
					{
						id: 4,
						name: '腿'
					},
					{
						id: 5,
						name: '二头'
					},
					{
						id: 6,
						name: '三头'
					},
					{
						id: 7,
						name: '小臂'
					},
					{
						id: 8,
						name: '小腿'
					},
					{
						id: 9,
						name: '臀部'
					},
					{
						id: 10,
						name: '核心'
					},
					{
						id: 11,
						name: '腹部'
					},
					{
						id: 12,
						name: '斜方肌'
					},
					{
						id: 13,
						name: '热身'
					},
					{
						id: 14,
						name: '拉伸'
					}
				],
				selected_loaction: '胸',
				selected_machine: '杠铃',
				machine_list: [{
						id: 1,
						name: '杠铃'
					},
					{
						id: 2,
						name: '哑铃'
					},
					{
						id: 3,
						name: '绳索'
					},
					{
						id: 4,
						name: '器械'
					},
					{
						id: 5,
						name: '悍马机'
					},
					{
						id: 6,
						name: '史密斯机'
					},
					{
						id: 7,
						name: '弹力带'
					},
					{
						id: 8,
						name: '自重'
					}
				],

				action_list: [{
						id: 1,
						name: '杠铃卧推',
						content: '中下胸、上胸、前束、三头'
					},
					{
						id: 2,
						name: '杠铃划船',
						content: '背阔肌、斜方肌、肱二头'
					}

				],

				all_action_description: {
					'杠铃': [{
							id: 1,
							name: '杠铃卧推',
							content: '中下胸、上胸、前束、三头'
						},
						{
							id: 2,
							name: '杠铃划船',
							content: '背阔肌、斜方肌、肱二头'
						}
					],
					'哑铃': [{
							id: 1,
							name: '哑铃飞鸟',
							content: '胸大肌、三角肌前束'
						},
						{
							id: 2,
							name: '哑铃弯举',
							content: '肱二头、前臂'
						}
					],
					'绳索': [{
						id: 1,
						name: '绳索下压',
						content: '肱三头、三角肌'
					}],
					'器械': [{
						id: 1,
						name: '器械推胸',
						content: '胸大肌、三角肌前束'
					}],
					'悍马机': [{
						id: 1,
						name: '悍马推胸',
						content: '胸大肌、三角肌前束'
					}],
					'史密斯机': [{
						id: 1,
						name: '史密斯深蹲',
						content: '股四头肌、臀大肌'
					}],
					'弹力带': [{
						id: 1,
						name: '弹力带划船',
						content: '背阔肌、肱二头'
					}],
					'自重': [{
						id: 1,
						name: '俯卧撑',
						content: '胸大肌、三角肌前束、肱三头'
					}]
				},
				selectedMachineIndex: 0,
				selectedLocationIndex: 0,
				isAutoScrolling: false,
				scrollTarget: ''
			}
		},
		mounted() {
			// console.log("execeldata",excelData);
			this.update_list(this.selected_loaction, this.selected_machine);
		},
		computed: {
			currentMachineName() {
				return this.machine_list[this.selectedMachineIndex].name;
			},
			action_description() {
				return this.all_action_description[this.currentMachineName] || [];
			}
		},
		methods: {
			async handleAction(item) {
				console.log("item", item)
				// 默认动作
				// 胸部：卧推
				// 背部：俯身划船
				// 肩部：站姿推肩
				// 臀部：罗马尼亚硬拉
				// 腿部：深蹲
				// 手臂：哑铃弯举
				let action_map = {
					"胸": 0,
					"肩": 1,
					"背": 2,
					"腿": 3,
					"二头": 4,
					"三头": 5,
					"小臂": 6,
					"小腿": 7,
					"臀部": 8,
					"核心": 9,
					"腹部": 10,
					"斜方肌": 11,
					"热身": 12,
					"拉伸": 13,
				}
				let action_arg = {
					"trainDayId": VueEvent.sharedData.train_id,
					"trainAction": item.action_name,
					"trainNum": 4,
					"trainFuHe": 1,
					"trainBody": action_map[item.action_name]
				}
				console.log("action_arg", action_arg)
				let res = await request_new.add_action(action_arg);
				if (res.status == 200 && res.data == true) {
					uni.showToast({
						title: '添加成功',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				}
				console.log("添加动作结果", res)
			},
			update_list(x, y) {
				console.log("xy", x, y)
				// 使用 filter() 方法进行筛选
				this.action_list = excelData.filter(item => {
					// 同时满足两个条件：类别为水果且价格小于6
					return item.loaction == this.selected_loaction && item.machine == this.selected_machine;
				});
				console.log("shaixuanhoude liebiao", this.action_list)
			},
			selectMachine(x, index) {
				this.selected_machine = x;
				this.selectedMachineIndex = index;
				this.isAutoScrolling = true;
				this.scrollTarget = 'machine-' + index;
				setTimeout(() => {
					this.isAutoScrolling = false;
					this.scrollTarget = '';
				}, 500);
			},
			selectLocation(x, index) {
				this.selected_loaction = x;
				this.selectedLocationIndex = index;
				this.update_list(this.selected_loaction, this.selected_machine);
			},
			getActionsByLocationAndMachine(location, machine) {
				return excelData.filter(item => {
					return item.loaction === location && item.machine === machine;
				});
			},
			handleScroll(e) {
				if (this.isAutoScrolling) return;
				const query = uni.createSelectorQuery().in(this);
				query.select('.right-center').boundingClientRect(scrollRect => {
					const scrollViewTop = scrollRect.top;
					const ids = this.machine_list.map((_, idx) => `#machine-${idx}`);
					query.selectAll(ids.join(",")).boundingClientRect(rects => {
						for (let i = 0; i < rects.length; i++) {
							if (rects[i] && rects[i].top - scrollViewTop >= 0) {
								this.selectedMachineIndex = i;
								this.selected_machine = this.machine_list[i].name;
								break;
							}
						}
					}).exec();
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: rgba(110, 88, 170, 0.02);

		.header {
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: center;

			.search {
				display: flex;
				align-items: center;
				width: 600rpx;
				height: 62rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(124, 124, 126, 0.1);

				.search-icon {
					width: 30rpx;
					height: 30rpx;
					margin: auto 18rpx;
				}

				input {
					width: 500rpx;
				}
			}

			.add {
				margin-left: 15rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.mid {
			display: flex;
			flex: 1;
			height: calc(100vh - 150rpx);

			.mid-left {
				width: 122rpx;
				height: 100%;
				border-right: 8rpx solid rgba(124, 124, 126, 0.2);

				.choose_location_list {
					padding-top: 44rpx;

					.choose_location_module {
						/** 文本1 */
						font-size: 24rpx;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						width: 122rpx;
						height: 88rpx;
						font-size: 28rpx;
						text-align: left;
						padding-left: 20rpx;
					}
				}
			}

			.mid-right {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.right-header {
					width: 100%;
					white-space: nowrap;

					.right-header-inner {
						display: inline-block;
						padding: 10rpx 0;
					}

					.right-header-module {
						display: inline-block;
						padding: 0 30rpx;
						height: 44rpx;
						line-height: 44rpx;
						border-radius: 30rpx;
						margin: 0 10rpx;
						background: #fff;
						font-size: 24rpx;
						color: #222;
						border: 1px solid transparent;
						transition: all 0.2s;
					}

					.right-header-module.active {
						background: #fff !important;
						color: rgba(110, 88, 170, 1) !important;
						border: 1px solid rgba(110, 88, 170, 1) !important;
					}
				}

				.right-content {
					flex: 1;
					overflow: hidden;
					display: flex;
					flex-direction: column;

					.right-title {
						/** 文本1 */
						font-size: 28rpx;
						font-weight: 500;
						margin-top: 15rpx;
						margin-left: 60rpx;
					}

					.right-center {
						flex: 1;
						height: 100%;
					}
				}
			}
		}
	}

	.choose_location_module.active-location {
		background: rgba(110, 88, 170, 0.07);
		color: rgba(110, 88, 170, 1);
		border-right: 8rpx solid rgba(110, 88, 170, 1);
	}

	.machine-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 30rpx 30rpx 20rpx;
		margin-left: 45rpx;
		color: black;
	}

	.right-content-module {
		// border: 1px solid black;
		margin: 15rpx 30rpx;
		display: flex;
		align-items: center;
		width: 542rpx;
		min-height: 60rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background: #fff;
	}

	.right-text .title {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
		text-align: left;
	}

	.right-text .content {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(124, 124, 126, 1);
	}
</style>